<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
	<th:block th:include="include :: header('师傅详情')" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: select2-css" />
</head>
<body class="gray-bg">
    <div class="container-div">
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="formId">
                    <div class="select-list">
                        <ul>
                            <li>
                                <label>选择年份：</label>
                            </li>
                            <li>
                                <input type="text" id="year" onchange="change()" th:value="${#dates.format(new java.util.Date(), 'yyyy')}"/>
                            </li>
                            <li>
                                <label>选择师傅：</label>
                            </li>
                            <li>
                                <select class="workerChoose form-control" onchange="change()"><option value="">全部</option></select>
                            </li>
                            <li>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="location.reload()"><i class="fa fa-refresh"></i>&nbsp;刷新</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>
            <form id="detail-div">
                <div class="col-sm-12 search-collapse">
                    <label></label>
                    <div class="echarts" id="workerReport"></div>
                </div>
            </form>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: echarts-js" />
    <th:block th:include="include :: datetimepicker-js" />
    <th:block th:include="include :: select2-js" />
    <th:block th:include="include :: jquery-cxselect-js" />
    <script type="text/javascript">

        $("#year").datetimepicker({
            format: "yyyy",
            startView: 4,
            minView: 4,
            autoclose: true
        });

        //拉取用户信息
        $(function () {
            $.ajax({
                type: "post",
                url: ctx + "hh/user/selectList",
                data: {
                    "roleId": 101
                },
                success: function(result) {
                    if (result.code == 0) {
                        $('#formId').cxSelect({
                            required: false,
                            firstTitle: '全部',
                            selects: ['workerChoose'],
                            jsonName: 'name',
                            jsonValue: 'id',
                            data: result.data
                        });
                    }
                }
            })
            change();
        });

        function change(){
            $.ajax({
                type: "post",
                url: ctx + "totalReport/report/workerDetail",
                data: {
                    "year": $("#year").val(),
                    "title": $(".workerChoose").val()
                },
                success: function (result) {
                    if (result.code == 0) {
                        if (result.data.length > 0) {
                            var htmlStr = spliceHtml(result.data);
                            $("#detail-div").html(htmlStr);
                            $(result.data).each(function (index, element) {
                                var divId = "detail-div-" + index;
                                echartsOption(element.title, element.names, element.moneys, divId);
                            });
                        } else {
                            var noneData = "<div class='col-sm-12 search-collapse'>\n" +
                                "<label></label>\n<h1>暂无数据</h1>\n</div>\n";
                            $('#detail-div').html(noneData);
                        }
                    }
                }
            })
        }
        
        function spliceHtml(data) {
            var htmlStr = "";
            $(data).each(function (index, element) {
                var divId = "detail-div-" + index;
                var divStr = "<div class='col-sm-12 search-collapse'>\n" +
                    "<label></label>\n" +
                    "<div class=echarts style='height: 350px' id=" + divId + "></div>\n</div>\n";
                htmlStr = htmlStr + divStr;
            });
            return htmlStr;
        }

        function echartsOption(title, namesData, moneyData, divId) {
            var option = {
                title: {
                    text: title,
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '4%',
                    right: '10%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: namesData
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.1]
                },
                series: [
                    {
                        type: 'bar',
                        data: moneyData,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true, //开启显示
                                    position: 'top', //在上方显示
                                    textStyle: { //数值样式
                                        color: 'black',
                                        fontSize: 20
                                    }
                                }
                            }
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ],
                            itemStyle: {
                                color: '#145096'
                            },
                            label: {
                                color: '#145096',
                                fontSize: 20
                            }
                        }
                    }
                ]
            };
            var barChart = echarts.init(document.getElementById(divId));
            barChart.setOption(option, true);
        }

    </script>
</body>
</html>